<template>
  <!-- HTML结构：要求template里面，有且只有一个根标签 -->
  <div>
    <h2>这是根组件</h2>
    <!-- 插值表达式，也叫做大胡子、小胡子语法 -->
    <p>姓名：{{ uname.toUpperCase() + ' 你好' }}</p>
    <p>年龄：{{ age }}</p>
    <p>{{ flag ? '111111' : '222222' }}</p>

    <!-- 标签的 v-html 属性，相当于 innerHTML 的意思 -->
    <p v-html="info">简介：</p>

    <!-- 标签的 v-text 属性，相当于 innerText 的意思 -->
    <p v-text="uname">xxx</p>
  </div>
</template>

<script>
// JavaScript

export default {
  // 对象里面可以写很多东西，比如 data、methods、computed、watch、components.....
  // data 用于存储数据；写法上要求data定义成函数，函数里面返回一个对象，所有的数据都放到这个返回的对象中
  data () {
    return {
      // 页面中用到的数据，都放到这里
      uname: 'zhangsan',
      age: 30,
      flag: true,
      info: '这是一个非常<strong>优秀</strong>的boy'
    }
  }
}
</script>

<style>
/* css样式 */
</style>
